import React, { useState } from 'react'
import { Layout, Timeline, Divider, Button, Collapse, Space } from 'antd'
import './index.scss'
import { useNavigate } from 'react-router-dom'
import {
  SearchOutlined,
  SettingOutlined
} from '@ant-design/icons'
import Center from '@/components/Center'

const { Header, Content, Footer } = Layout
const RightLayout = ({ info, path_data, handelClickPath }) => {
  console.log(info)

  const items = []
  if (info) {

  } else {
    info = {
      r_num: 0,
      dist: 0,
      time: 0,
      wait: 0,
      delay: 0
    }
  }
  const generateItems = () => {
    for (let i = 0;i < 5;i++) {
      if (i === 0) {
        items.push({
          'label': '车辆数',
          'children': info.r_num
        })
      } else if (i === 1) {
        items.push({
          'label': '总旅行路程',
          'children': info.dist,
          color: 'green',
        })
      } else if (i === 2) {
        items.push({
          'label': '总旅行时间',
          'children': info.time,
          color: 'red',
        })
      } else if (i === 3) {
        items.push({
          'label': '总等待时间',
          'children': info.wait,
          color: 'purple',
        })
      } else if (i === 4) {
        items.push({
          'label': '总延误时间',
          'children': info.delay,
          color: 'cyan',
        })
      }
    }
  }
  generateItems()

  console.log(items)

  const item = []

  const genereteRoad = () => {
    for (let i = 0;i < path_data.length;i++) {
      const road = path_data[i]
      let roadList = road.map(item => item.name).join(" -> ")

      item.push({
        key: i,
        label: <div style={{ fontWeight: 'bold' }}>路径{i + 1}</div>,
        children: <p>{roadList}</p>
      })
    }
  }
  if (path_data) {
    genereteRoad()
  }

  const navigate = useNavigate()
  const clickButton = () => {
    navigate('/process')
  }

  // 点击路径
  const [activeKey, setActiveKey] = useState('')
  const clickPath = (key) => {
    setActiveKey(key)
    if (key.length !== 0) {
      const pathName = item[key].label.props.children[0] + item[key].label.props.children[1]
      handelClickPath(pathName)
    } else {
      handelClickPath('')
    }
  }



  return (
    <Layout style={{ height: '70vh' }}>
      <Header style={{ height: '10%', backgroundColor: 'white' }}>
        {/* 上部分内容 */}
        <Center>
          <Button type='primary' onClick={clickButton} icon={<SearchOutlined />}
            style={{
              marginTop: 10
            }}
          >选择方案</Button>
        </Center>

      </Header>
      <Divider style={{ margin: 0 }} />
      <Content style={{ height: '43%', overflowY: 'hidden', overflowX: 'hidden', margin: 0, backgroundColor: 'white', position: 'relative' }}>
        {/* 中部分内容 */}
        <h2 >优化目标</h2>
        <div style={{
          // backgroundColor: 'red',
          position: 'absolute',
          width: '100%',
          left: 30,
          top: 30
        }}>
          <Timeline items={items} mode='left' />
        </div>
      </Content>
      <Divider style={{ margin: 0 }} />
      <Footer style={{ height: '47%', padding: 0, overflowY: 'auto', backgroundColor: 'white', }}>
        {/* 下部分内容 */}
        <h2>路径信息</h2>
        {path_data && <Collapse items={item} style={{ padding: 5, marginTop: 10 }} accordion
          onChange={clickPath}
          activeKey={activeKey}
        />}
      </Footer>
    </Layout>
  )
}

export default RightLayout
